<template>
  <div class="">
    <!-- <div class="pop-title">上传资料</div> -->
    <van-steps class="van-steps" :active="active" active-color="#38f" finish-icon="success" active-icon="info">
      <van-step>手机验证</van-step>
      <van-step>身份验证</van-step>
      <van-step>签署协议</van-step>
      <van-step>签署合同</van-step>
      <van-step>绑银行卡</van-step>
    </van-steps>
    <!-- 第一步 手机号信息 -->
    <div class="steps" v-if="active == 0">
      <div class="title">手机号信息</div>
      <div class="setForm">
        <div class="form-lable">绑定的手机号</div>
        <div class="form-input"><input v-model="phone" maxlength="11" placeholder="请输入需要绑定的手机号" /></div>
      </div>
      <div class="setForm">
        <div class="form-lable">短信验证码</div>
        <div class="form-input">
          <div class="code" :class="smsCode != '点击获取' ? 'set-code': ''" @click="getCode">{{smsCode}}</div>
          <input placeholder="请输入短信验证码" maxlength="6" v-model="code" />
        </div>
        <div class="form-tips">注意：手机号绑定后不可进行修改，跟您当前的账户资金提现相关，请谨慎操作！</div>
      </div>
    </div>
    <!-- 第二步 身份信息 -->
    <div class="steps" v-if="active == 1">
      <div class="title">身份证信息</div>
      <div class="setForm">
        <div class="form-lable">上传证件照</div>
        <div class="upload-card">
          <!-- <UploadImg ref="uploadImgChildA" previewSize="150px" typeImage="https://img.wifenxiao.com/h5-wfx/images/shenfenz-a.png" maxCount="1" @uploadImgList="uploadImgCardA" class="img-lists"></UploadImg>
          <UploadImg ref="uploadImgChildB" previewSize="150px" typeImage="https://img.wifenxiao.com/h5-wfx/images/shenfenz-b.png" maxCount="1" @uploadImgList="uploadImgCardB" class="img-lists"></UploadImg> -->
          <SmallUploadImg ref="uploadImgChildA" class="img-lists" :isUploadSfz="true" :previewSize="true" sfzBg="https://img.wifenxiao.com/h5-wfx/images/shenfenz-a.png" :maxLength="1" @changeImgList="uploadImgCardA" :isChangeStyle="true"></SmallUploadImg>
          <SmallUploadImg ref="uploadImgChildB" class="img-lists" :isUploadSfz="true" :previewSize="true" sfzBg="https://img.wifenxiao.com/h5-wfx/images/shenfenz-b.png"  :maxLength="1" @changeImgList="uploadImgCardB" :isChangeStyle="true"></SmallUploadImg>

        </div>
        <div class="upload-card">
          <div class="cardMsg" v-if="icardA"><img src="https://img.wifenxiao.com/h5-wfx/images/success.png" /></div>
          <div class="cardMsg" v-if="icardB"><img src="https://img.wifenxiao.com/h5-wfx/images/success.png" /></div>
          <div class="cardMsg" v-if="cardMsgA"><img src="https://img.wifenxiao.com/h5-wfx/images/danger1.png" /><span>{{cardMsgA}}</span></div>
          <div class="cardMsg" v-if="cardMsgB"><img src="https://img.wifenxiao.com/h5-wfx/images/danger1.png" /><span>{{cardMsgB}}</span></div>
        </div>
      </div>
    </div>
    <!-- 第五步 银行卡信息 -->
    <div class="steps" v-if="active == 4">
      <div class="title">银行卡信息</div>
      <div class="setForm">
        <div class="form-lable">绑定的银行卡号</div>
        <div class="form-input"><input v-model="bank_card" placeholder="请输入需要绑定的银行卡号" /></div>
        <div class="form-tips">注意：请勿填写信用卡卡号</div>
      </div>
      <div class="setForm">
        <div class="form-lable">银行卡绑定的手机号</div>
        <div class="form-input"><input v-model="tel" maxlength="11" placeholder="请输入银行卡绑定的手机号" /></div>
      </div>
      <div class="setForm">
        <div class="form-lable">短信验证码</div>
        <div class="form-input">
          <div class="code" :class="smsCodeBank != '点击获取' ? 'set-code': ''" @click="getCode('bank')">{{smsCodeBank}}</div>
          <input placeholder="请输入短信验证码" maxlength="6" v-model="bank_code" />
        </div>
      </div>
    </div>
    <div class="btn-whole">
      <div class="form-tips">上传资料后需要耐心等待几秒钟</div>
      <div class="btn-items">
        <van-button class="btn warning-btn" @click="closePop">关闭</van-button>
        <!-- <van-button class="btn light-blue-btn" :class="active == 0 || active == 4 ?'disabled-btn' : ''" @click="stepUp">上一步</van-button> -->
        <van-button class="btn light-blue-btn" @click="stepNext" v-if="active == 4">完成</van-button>
        <van-button class="btn light-blue-btn" @click="stepNext" v-else>下一步</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Step, Steps, Toast } from 'vant'
Vue.use(Step).use(Steps).use(Toast)
import SmallUploadImg from '@/components/SmallUploadImg/index.vue'
import { tongLianGetSmsCode, tongLianGetUserId, tongLianIdCard, tongLianRealNameAuth, bindBankCard, applyBindBankCard, getContractUrl, getAgreementUrl } from '@/api/user/fxs/fxsApi'
export default {
  components: {
    SmallUploadImg
  },
  props: {
    tonglianPhone: {
      type: String,
      default: ''
    },
    tlActive: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      active: 1,
      phone: '', // 手机号
      code: '', // 验证码
      icardA: '', // 身份证正面
      icardB: '', // 身份证反面
      smsCode: '点击获取', // 获取手机验证码
      smsCodeBank: '点击获取',
      smsSeqNo: '',
      cardMsgA: '',
      cardMsgB: '',
      bank_card: '',
      tel: '',
      signSeqNo: '',
      bank_code: ''
    }
  },
  watch: {
    tonglianPhone(val) {
      this.phone = val
    },
    tlActive(val) {
      this.active = val
    }
  },
  created() {
    this.phone = this.tonglianPhone
    this.active = this.tlActive
    this.code = ''
    this.icardA = ''
    this.icardB = ''
    this.smsSeqNo = ''
    this.smsCode = '点击获取'
    this.smsCodeBank = '点击获取'
    this.cardMsgA = ''
    this.cardMsgB = ''
    this.bank_card = ''
    this.tel = ''
    this.signSeqNo = ''
    this.bank_code = ''
  },
  methods: {
    // 获取验证码倒计时
    setTimeoutVerify() {
      let count = 60
      this.smsCode = count + '秒后重新获取'
      const timer = setInterval(() => {
        this.smsCode = count + '秒后重新获取'
        if (count <= 0) {
          this.smsCode = '点击获取'
          clearInterval(timer)
        }
        count--
      }, 1000)
    },
    setTimeoutVerifyBank() {
      let count = 60
      this.smsCodeBank = count + '秒后重新获取'
      const timer = setInterval(() => {
        this.smsCodeBank = count + '秒后重新获取'
        if (count <= 0) {
          this.smsCodeBank = '点击获取'
          clearInterval(timer)
        }
        count--
      }, 1000)
    },
    // 获取短信验证码
    getCode(name) {
      // 获取银行卡的短信验证码
      if (name == 'bank') {
        if (this.tel && this.bank_card) {
          if (this.smsCodeBank != '点击获取') {
            return false
          }
          this.$loadingWrap.show()
          applyBindBankCard({
            bank_card: this.bank_card,
            tel: this.tel
          }).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.$Error('发送成功')
              this.signSeqNo = res.data.signSeqNo
              this.setTimeoutVerifyBank()
            } else {
              this.$Error(res.msg)
            }
          })
        } else {
          if (!this.bank_card) {
            this.$Error('请输入需要绑定的银行卡号')
          } else if (!this.tel) {
            this.$Error('请输入银行卡绑定的手机号')
          }
        }
      } else {
        if (this.phone) {
          if (this.smsCode != '点击获取') {
            return false
          }
          this.$loadingWrap.show()
          tongLianGetSmsCode({
            mobile: this.phone
          }).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.$Error('发送成功')
              this.smsSeqNo = res.data.smsSeqNo
              this.setTimeoutVerify()
            } else {
              this.$Error(res.msg)
            }
          })
        } else {
          this.$Error('请输入需要绑定的手机号')
        }
      }
    },
    // 关闭通联认证弹出框
    closePop() {
      // console.log('11111', 'close')
      this.$emit('close')
    },
    // 上一步
    stepUp() {
      if (this.active != 0 && this.active != 4) {
        this.active--
      }
    },
    nextNum(data) {
      const that = this
      // console.log('dat5a', data)
      if (data.res == 1) { // 1:该用户已完成所有认证操作
        that.$Error(data.msg)
        that.$emit('close', 'success')
      } else if (data.res == 22) { // 22:该用户尚未实名认证
        that.active++
      } else if (data.res == 23) { // 23:用户尚未签署通联电子协议
        Toast.setDefaultOptions({ duration: 0 })
        that.$Error('即将跳转签署通联电子协议')
        getAgreementUrl().then(res => {
          Toast.clear()
          that.$emit('close')
          that.$loadingWrap.close()
          if (res.status == 1) {
              wx.navigateToMiniProgram({
                appId: 'wx66306c553d4d260b',
                path: 'pages/merchantAddress/merchantAddress',
                extraData: {
                  targetUrl: res.data.url
                },
                success(res) {
                  // 打开成功
                  // console.log(res)
                },
                fail(error) {
                  that.$Error('签约跳转失败')
                }
              })
          } else {
            that.$Error(res.msg)
          }
        })
      } else if (data.res == 24) { // 24:该用户尚未绑定银行卡
        that.active = 4
      } else if ( data.res == 27) { // 27:该用户合同签署中
        that.$Error(data.msg)
        that.$emit('close', 'success')
      } else if (data.res == 28 || data.res == 26) { // 28: 该用户需要重新签署合同；26:该用户尚未签署相关合同
      // console.log('11111', data.res)
        Toast.setDefaultOptions({ duration: 0 })
        that.$Error(`${data.msg},即将跳转签署合同`)
        that.$emit('close')
        getContractUrl().then(data => {
          Toast.clear()
          that.$loadingWrap.close()
          const version = data.data.version ? data.data.version : 'release'
          if (data.status == 1) {
            let path = `/pages/index/index?interactionType=${data.data.interactionType}&tonglianId=${data.data.tonglianId}&mId=${data.data.mId}`
            wx.navigateToMiniProgram({
              appId: 'wxe1ef808b3a9f6fae',
              path,
              envVersion: version,
              extraData: {
                interactionType: data.data.interactionType,
                tonglianId: data.data.tonglianId,
                mId: data.data.mId
              },
              success(res) {
                // 打开成功
                // console.log(res)
              },
              fail(error) {
                that.$Error('签约跳转失败')
              }
            })
          } else {
            that.$Error(data.msg)
          }
        })
      }
    },
    // 下一步
    stepNext() {
      // console.log('this.active', this.active)
      if (this.active == 0) {
        if (this.code && this.smsSeqNo) {
          this.$loadingWrap.show()
          tongLianGetUserId({
            code: this.code,
            mobile: this.phone,
            smsSeqNo: this.smsSeqNo
          }).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.nextNum(res.data)
            } else {
              this.$Error(res.msg)
            }
          })
        } else {
          this.$Error('请输入正确短信验证码')
        }
      } else if (this.active == 1) {
        if (this.icardA && this.icardB) {
          this.$loadingWrap.show()
          tongLianRealNameAuth().then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              // window.location.href = res.data.url
              this.$emit('close')
              wx.navigateToMiniProgram({
                appId: 'wx66306c553d4d260b',
                path: 'pages/merchantAddress/merchantAddress',
                extraData: {
                  targetUrl: res.data.url
                },
                success(res) {
                  // 打开成功
                  // console.log(res)
                },
                fail(error) {
                  that.$Error('签约跳转失败')
                }
              })
            } else {
              this.$Error(res.msg)
            }
          })
        } else {
          this.$Error('请上传身份证正反面照片')
        }
      } else if (this.active == 4) {
        if (this.bank_card && this.signSeqNo && this.bank_code && this.tel) {
          this.$loadingWrap.show()
          bindBankCard({
            bank_card: this.bank_card,
            code: this.bank_code,
            sign_seq_no: this.signSeqNo,
            tel: this.tel
          }).then(res => {
            if (res.status == 1) {
              this.$emit('close', 'success')
              // getContractUrl().then(res => {
              //   this.$loadingWrap.close()
              //   if (res.status == 1) {
              //     window.location.href = res.data
              //   } else {
              //     this.$Error(res.msg)
              //   }
              // })
            } else {
              this.$loadingWrap.close()
              this.$Error(res.msg)
            }
          })
        } else {
          if (!this.bank_card) {
            this.$Error('请输入需要绑定的银行卡号')
          } else if (!this.tel) {
            this.$Error('请输入银行卡绑定的手机号')
          } else if (!this.signSeqNo && !this.bank_code) {
            this.$Error('请输入正确的短信验证码')
          }
        }
      }
    },
    // 上传身份证正面
    uploadImgCardA(val) {
      // console.log('val', val)
      if (val.length > 0) {
        this.$loadingWrap.show()
        tongLianIdCard({
          type: 1,
          file: val[0]
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.icardA = val[0]
            this.cardMsgA = ''
            this.$Error('身份证上传成功')
          } else {
            this.$Error(res.msg)
            this.cardMsgA = res.msg
          }
        })
      } else {
        this.icardA = ''
        this.cardMsgA = ''
      }
      // console.log('icardA', arr)
    },
    // 上传身份证反面
    uploadImgCardB(val) {
      if (val.length > 0) {
        this.$loadingWrap.show()
        tongLianIdCard({
          type: 2,
          file: val[0]
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.icardB = val[0]
            this.cardMsgB = ''
            this.$Error('身份证上传成功')
          } else {
            this.$Error(res.msg)
            this.cardMsgB = res.msg
          }
        })
      } else {
        this.icardB = ''
        this.cardMsgB = ''
      }
    }
  }
}
</script>
<style lang="scss">
.van-steps {
  padding: 30px 40px!important;
  .van-step__title, .van-step__icon {
    font-size: 24px!important
  }
  .van-step__circle-container {
    top: 50px!important
  }
  .van-step__line {
    top: 50px!important
  }
}
.pop-title {
  font-size: 30px;
  text-align: center;
  margin: 30px 0 20px 0;
}
.steps {
  margin: 20px 0;
  padding: 20px;
  background: #fff;
  .title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .setForm {
    padding: 20px;
    font-size: 26px;

    .form-lable {
      padding-bottom: 10px;
    }
    .form-input {
      position: relative;
      input {
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid #e2e2e2;
      }
      .code {
        padding: 20px;
        position: absolute;
        right: 0px;
        top: 0px;
        background: #38f;
        z-index: 99;
        color: #fff;
        &.set-code {
          background-color: #ccc;
          // color: #000
        }
      }
    }
    .form-tips {
      color: red;
      font-size: 24px;
      padding-top: 20px;
    }
  }
}
.btn-whole {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .form-tips {
    text-align: center;
    color: red;
    margin-bottom: 20px;
  }
}
.btn-items {
  // padding-top: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;

  .btn {
    padding: 20px 40px;
    height: 56px;
    border: none;
    border-radius: 30px;
    color: #fff;
    // float: right;
    margin-right: 20px;
    font-size: 28px;
    margin-top: 10px;
    &.warning-btn{
      background: #38f;
    }
    &.light-blue-btn {
      background: transparent;
      border:2px solid #38f;
      color: #38f;
    }
    &.disabled-btn {
      background: #ccc;
      border:2px solid #ccc;
      color: #fff;
    }
  }
}
.upload-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .cardMsg {
    width: 50%;
    text-align: center;
    i {
      position: relative;
      top: 2px;
    } span {
      margin-left: 10px;
    }
    img {
      width: 30px;
      height: 30px;
      position: relative;
      top: 6px;
    }
  }
  .img-lists {
    width: 50%;
    padding: 20px;
  }
}
.samll-upload {
  height: 270px!important;
}


</style>